<template>
  <div class="report-container">
    <div class="report">
      <span @click="report(0)">举报</span>
      <span @click="report(1)">屏蔽</span>
      <span @click="$emit('hide-report')">取消</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    report(val) {
      if (val == 0) {
        this.$dialog
          .confirm({
            title: '举报',
            message: '确认要举报作者吗？'
          })
          .then(() => {
            this.$toast('举报成功')
            this.$emit('hide-report')
          })
          .catch(() => {
            this.$emit('hide-report')
          })
      } else {
        this.$dialog
          .confirm({
            title: '是否屏蔽此人？',
            message: '屏蔽后你将无法收到来自TA的私信'
          })
          .then(() => {
            this.$toast('已屏蔽此人')
            this.$emit('hide-report')
          })
          .catch(() => {
            this.$emit('hide-report')
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.report-container {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);

  .report {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;

    span {
      padding: 15px;
      flex: 1;
      font-size: 16px;
      color: #333;
      text-align: center;
    }
  }

  .report-enter,
  .report-leave-to {
    transform: translateY(100%);
  }
  .report-enter-active,
  .report-leave-active {
    transition: all 0.5s linear;
  }
  .report-enter-to,
  .report-leave {
    transform: translateY(0%);
  }
}
</style>
